<template>
  <nav class="nav-bar">
    <!-- 左侧导航项 -->
    <template v-for="item in leftNavItems" :key="item.id">
      <a :href="item.link" class="nav-item">{{ item.text }}</a>
    </template>

    <!-- 右侧导航项 -->
    <div class="right-section">
      <!-- 未登录状态 -->
      <template v-if="!isLoggedIn">
        <a href="/login" class="nav-item">登录</a>
        <a href="/register" class="nav-item">注册</a>
      </template>
      
      <!-- 登录状态 -->
      <template v-else>
        <el-dropdown trigger="click">
          <span class="user-info nav-item">
            <el-avatar :size="30" :src="userAvatar">{{ userNameFirst }}</el-avatar>
            {{ userName }}
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="goToUserProfile">个人主页</el-dropdown-item>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>

      <router-link to="/cart" class="cart-icon">
        购物车 ({{ cartCount }})
      </router-link>
    </div>
  </nav>
  <div class="header-container">
    <header class="mi-header">
      <!-- Logo -->
      <div class="logo">
        <a href="#">
          <img src="http://127.0.0.1:8888/static/picture/dcc131a8-348e-4291-b43a-242eeabd8571-cat.jpg" alt="小米官网">
        </a>
      </div>

      <!-- 主导航 -->
      <nav class="main-nav">
        <ul>
          <li><a href="#">衣服</a></li>
          <li><a href="#">食品</a></li>
          <li><a href="#">珠宝首饰</a></li>
          <li><a href="#">百货商品</a></li>
          <li><a href="#">数码产品</a></li>
          <li><a href="#">骑行装备</a></li>
        </ul>
      </nav>

      <!-- 搜索框 -->
      <div class="search-box">
        <el-input
          v-model="searchText"
          placeholder="搜索"
          class="search-input"
        >
          <template #suffix>
            <el-button class="search-btn">
              <el-icon><Search /></el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
    </header>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const searchText = ref('')

// 左侧导航数据
const leftNavItems = ref([
  { id: 1, text: '首页', link: '/' },
  { id: 2, text: '官网', link: '#' },
  { id: 3, text: '社区', link: '#' },
  { id: 4, text: '服务中心', link: '#' },
  { id: 5, text: '云服务', link: '#' },
  { id: 6, text: 'IoT', link: '#' },
  { id: 7, text: '智能', link: '#' }
])

// 右侧导航数据 
const rightNavItems = ref([
  { id: 1, text: '登录', link: '/login' },
  { id: 2, text: '注册', link: '/register' },
  { id: 3, text: '消息通知', link: '#' }
])

// 购物车数量 - 使用computed确保响应性
const cartCount = computed(() => {
  const cart = JSON.parse(localStorage.getItem('cart') || '[]')
  return cart.length
})

// 判断是否登录
const isLoggedIn = computed(() => {
  return !!localStorage.getItem('userName')
})

// 获取用户信息
const userName = computed(() => {
  return localStorage.getItem('userName') || '用户'
})

// 获取用户头像，如果没有则显示用户名首字
const userAvatar = computed(() => {
  return localStorage.getItem('userAvatar') || ''
})

// 获取用户名首字母/汉字
const userNameFirst = computed(() => {
  return userName.value.charAt(0)
})

// 跳转到个人主页
const goToUserProfile = () => {
  router.push('/profile')
}

// 处理退出登录
const handleLogout = () => {
  localStorage.removeItem('userName')
  localStorage.removeItem('userAvatar')
  localStorage.removeItem('cart')
  router.push('/index')
  router.go(0)
}
</script>

<style scoped>
.nav-bar {
  background-color: #333;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.nav-item {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  margin-right: 20px;
}

.nav-item:hover {
  color: #ccc;
}

.right-section {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-right: 20px;
}

.cart-icon {
  color: #fff;
  text-decoration: none;
}

.cart-icon:hover {
  color: #ccc;
}

.header-container {
  margin-top: 60px;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.mi-header {
  height: 100px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 48px;
  max-width: 1140px;
  margin: 0 auto;
  padding-right: 40px;
}

.logo {
  width: 56px;
  height: 56px;
  margin-right: 30px;
}

.logo img {
  width: 100%;
  height: 100%;
}

.main-nav {
  flex: 1;
  height: 100%;
}

.main-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  align-items: center;
}

.main-nav li {
  padding: 0 10px;
  height: 100%;
  display: flex;
  align-items: center;
}

.main-nav a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  padding: 0 10px;
  transition: color 0.2s;
}

.main-nav a:hover {
  color: #ff6700;
}

.search-box {
  width: 296px;
}

.search-input {
  width: 100%;
}

.search-input :deep(.el-input__inner) {
  border-radius: 2px;
  height: 50px;
  font-size: 14px;
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 2px;
}

.search-btn {
  background: #fff;
  border: none;
  color: #616161;
  font-size: 18px;
  cursor: pointer;
  padding: 0 10px;
}

.search-btn:hover {
  color: #ff6700;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .mi-header {
    padding: 0 20px;
  }
  
  .main-nav li {
    padding: 0 5px;
  }
  
  .main-nav a {
    padding: 0 5px;
  }
}

@media (max-width: 992px) {
  .search-box {
    width: 200px;
  }
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.el-avatar {
  background-color: #ff6700;
}

/* 确保下拉菜单文字颜色正常 */
:deep(.el-dropdown-menu__item) {
  color: #333;
}

:deep(.el-dropdown-menu__item:hover) {
  color: #ff6700;
  background-color: #f5f5f5;
}
</style>